<div class="tab-pane fade" id="frp" role="tabpanel">
    {% for config, val in {
        "API URL": ("frp_api_url", "Frp API to connect to"),
        "Http Domain Suffix": ("frp_http_domain_suffix", "Will be appended to the hash of a container"),
        "Http Port": ("frp_http_port", "For http redirect"),
        "Direct IP Address":("frp_direct_ip_address","For direct redirect"),
        "Direct Minimum Port": ("frp_direct_port_minimum", "For direct redirect (pwn challenges)"),
        "Direct Maximum Port": ("frp_direct_port_maximum", "For direct redirect (pwn challenges)"),
    }.items() %}
        {% set value = get_config('whale:' + val[0]) %}
        <div class="form-group">
            <label for="{{ val[0].replace('_', '-') }}">
                {{ config }}
                <small class="form-text text-muted">
                    {{ val[1] }}
                </small>
            </label>
            <input type="text" class="form-control"
                   id="{{ val[0].replace('_', '-') }}" name="{{ 'whale:' + val[0] }}"
                   {% if value != None %}value="{{ value }}"{% endif %}>
        </div>
    {% endfor %}
    {% set frpc_template = get_config("whale:frp_config_template") %}
    <div class="form-group">
        <label for="frp-config-template">
            Frpc config template
            <small class="form-text text-muted">
                Frp config template, only need common section!
            </small>
        </label>
        <textarea class="form-control input-filled-valid"
                  id="frp-config-template" rows="7"
                  name="whale:frp_config_template"
        >{{ frpc_template }}</textarea>
    </div>
    {% if frpc_template %}
    <div class="form-group">
        <label for="frps-config-template">
            Frps config template [generated]
            <small class="form-text text-muted">
                This configuration is generated with your settings above.
            </small>
        </label>
        <textarea class="form-control input-filled-valid grey-text"
                  id="frps-config-template" rows="6"
                  disabled>
[common]
{% for i in frpc_template.split('\n') %}
    {%- if 'token' in i -%}{{ i }}{%- endif -%}
    {%- if 'server_port' in i -%}{{ i.replace('server_port', 'bind_port') }}{%- endif -%}
{% endfor %}
vhost_http_port = {{ get_config('whale:frp_http_port') }}
subdomain_host = {{ get_config('whale:frp_http_domain_suffix').lstrip('.') }}
</textarea>
    </div>
    {% endif %}
    <div class="submit-row float-right">
        <button type="submit" tabindex="0" class="btn btn-md btn-primary btn-outlined">
            Submit
        </button>
    </div>
</div>